<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM综合练习</title>
    <script>
        function addEmp() {
            let emp = document.getElementById("emp");
            //创建tr
            let tr = document.createElement("tr");
            //添加用户
            let username = document.createElement("td");
            let name = document.getElementById("name").value;
            let test = document.createTextNode(name);
            username.appendChild(test)
            tr.appendChild(username)
            //添加工资
            let salarys = document.createElement("td");
            let salary = document.getElementById("salary").value;
            let test1 = document.createTextNode(salary);
            salarys.appendChild(test1)
            tr.appendChild(salarys)
            //添加删除控件
            let action = document.createElement("td");
            let delBtn = document.createElement("button");
            delBtn.textContent = "删除";
            // 点按钮时删掉本行
            delBtn.onclick = function () {
                tr.remove();
            };
            action.appendChild(delBtn);
            tr.appendChild(action);
            emp.appendChild(tr)

        }
    </script>
</head>
<body>
<h2>添加员工信息</h2>
姓名:<input type="text" id="name"><br>
工资:<input type="text" id="salary"><br>
<button onclick="addEmp()">添加</button>
<hr>
<table id="emp" border="1" style="width: 500px;background-color: #dddddd;">
    <tr>
        <th>姓名</th>
        <th>工资</th>
        <th>操作</th>
    </tr>
</table>
</body>
</html>